<template>
	<view>
		<view class="kui-p-3">
			<template v-for="(item, index) in chat">
				<view class="kui-flex kui-mt-3" :class="item.role == 'self' ? 'kui-flex-row-reverse' : ''">
					<view class="kui-bg-green-500 kui-w-10 kui-h-10 kui-rounded kui-flex-shrink-0" :class="item.role == 'self' ? 'kui-bg-blue-500 kui-ml-2' : 'kui-mr-2'"></view>
					<view class="">
						<view class="kui-leading-none" v-if="item.role !== 'self'">
							<text class="kui-text-sm kui-font-light kui-text-gray-600">{{ item.name }}</text>
						</view>
						<view class="kui-bg-white kui-rounded kui-break-all" :class="item.role == 'self' ? 'kui-ml-12 kui-mt-0' : 'kui-mr-12 kui-mt-1'">
							<view class="kui-py-2 kui-px-2 kui-tracking-wider">
								<text class="kui-text-base kui-font-serif">{{ item.txt }}</text>
							</view>
						</view>
					</view>	
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chat: [{
					txt: '你好，很高兴认识你哈哈哈哈哈哈',
					name: '张先生',
					role: 'friends'
				}, {
					txt: '你好，很高兴认识你哈哈哈哈哈哈',
					name: '李先生',
					role: 'self'
				}, {
					txt: '测试1测试1测试1',
					name: '张先生',
					role: 'friends'
				}, {
					txt: '测试2测试2测试2测试2',
					name: '张先生',
					role: 'friends'
				}, {
					txt: '测试3测试3测试3测试3测试3测试3测试3测试3测试3',
					name: '李先生',
					role: 'self'
				}]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
